<template>
  <FormView not-form form-width="100%">
    <div class="custom-tree-container">
      <div class="block">
        <p>context-menu：</p>
        <EditableTree
          context-menu
          class="demo-et-tree"
          :fetch-api="getBookmark"
          :save-api="addBookmark"
          :delete-api="removeBookmark"
          :update-api="updateBookmark" />
      </div>
      <div class="block">
        <p>context-menu：</p>
        <EditableTree
          context-menu
          context-menu-icon
          class="demo-et-tree"
          :fetch-api="getBookmark"
          :save-api="addBookmark"
          :delete-api="removeBookmark"
          :update-api="updateBookmark" />
      </div>
      <div class="block">
        <p>custom-context-menu：</p>
        <EditableTree
          context-menu
          class="demo-et-tree"
          :fetch-api="getBookmark"
          :save-api="addBookmark"
          :delete-api="removeBookmark"
          :update-api="updateBookmark">
          <template #context-menu="{ curNode, curData }">
            <li class="menu-item" @click="menuClick(curNode, curData)">
              <i class="el-icon-menu" style="color: #16b0ff"></i> 添加任务信息
            </li>
            <li class="menu-item" @click="menuClick(curNode, curData)">
              <i class="el-icon-menu" style="color: #16b0ff"></i> 编辑
            </li>
            <li class="menu-item" @click="menuClick(curNode, curData)">
              <i class="el-icon-menu" style="color: #16b0ff"></i> 删除任务
            </li>
            <li class="menu-item" @click="menuClick(curNode, curData)">
              <i class="el-icon-menu" style="color: #16b0ff"></i> 添加子任务
            </li>
            <li class="menu-item" @click="menuClick(curNode, curData)">
              <i class="el-icon-menu" style="color: #16b0ff"></i> 添加同级任务
            </li>
          </template>
        </EditableTree>
      </div>
      <div class="block">
        <p>inline-menu：</p>
        <EditableTree
          class="demo-et-tree"
          :fetch-api="getBookmark"
          :save-api="addBookmark"
          label="分类"
          :delete-api="removeBookmark"
          :update-api="updateBookmark" />
      </div>
      <div class="block">
        <p>new-node-builder：</p>
        <EditableTree
          class="demo-et-tree"
          :fetch-api="findChildren"
          :save-api="saveEntity"
          label="任务分类"
          :new-node-builder="newNodeBuilder"
          :delete-api="deleteEntity"
          :update-api="updateEntity" />
      </div>
      <div class="block">
        <p>readonly：</p>
        <EditableTree
          class="demo-et-tree"
          :fetch-api="getBookmark"
          :save-api="addBookmark"
          show-checkbox
          label="分类"
          readonly
          :delete-api="removeBookmark"
          :update-api="updateBookmark"
          @check="checkChange" />
      </div>
    </div>
  </FormView>
</template>

<script>
  export default {
    name: 'EditableTreeDemo',
    methods: {
      getBookmark() {},
      addBookmark() {},
      updateBookmark() {},
      removeBookmark() {},
      findChildren(parentId) {
        // return findChildren(parentId, -1)
      },
      deleteEntity() {},
      updateEntity() {},
      saveEntity() {},
      newNodeBuilder(name, parent) {
        return {
          name,
          parentId: parent.id,
          status: 1
        }
      },
      menuClick(node, data) {
        // console.log(data)
      },
      checkChange(data, check) {
        // console.log(check)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .custom-tree-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .demo-et-tree {
      height: 220px;
    }

    .block {
      flex: 1;
      width: 31%;
      min-width: 31%;
      margin: $margin-size;
      padding: $padding-size;
      background-color: white;
    }
  }
</style>
